<!--
import { setTimeout } from 'timers';
import { type } from 'os';
 * @Author: your name
 * @Date: 2021-03-09 12:03:23
 * @LastEditTime: 2021-03-24 11:12:52
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solaxcloud\src\views\getUserEmailCode.vue
-->
<template>
    <div>
        <el-dialog
            :title="$t('warmPrompt')"
            :visible="getUserEmailCodeFlagHeader"
            class="el-dialog-lg"
            @close="()=>{$store.commit('setGetUserEmailCodeFlagHeader',false)}">
                <div>
                    <h3 class="msg-text">{{$t('agreement.sure_cancel_account')}}?</h3>
                    <p class="sendCode">
                        <span>{{$t('warranty.emailCode')}}: </span>
                        <span style="color:#b6b6b6">{{email}} </span>
                        <el-button :disabled="num?email?true:false:false" @click='send'>{{num ? num + "s":$t('verification.code')}}</el-button>
                    </p>
                    <div class="sendCodeInput">
                        <el-form ref="form" :model="form" label-width="185px" >
                            <el-row :gutter="20" >
                                <el-col :span="20" :offset="4">
                                    <el-form-item :label="$t('verification.code')" prop="code" :rules="[{ required: true, message: $t('index_js_notNull')}]">
                                        <el-input v-model="form.code" :placeholder="$t('pleaseInput')"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>
                    </div>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="()=>{$store.commit('setGetUserEmailCodeFlagHeader',false)}">{{$t('cancel')}}</el-button>
                    <el-button type="primary" @click="save('form')">{{$t('sure')}}</el-button>
                </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    components: {

    },
    props: {
    },
    data() {
        return {
            num:0,
            form:{
                code:''
            },
            email:''
        };
    },
    computed: {
        getUserEmailCodeFlagHeader(){
            return this.$store.state.sysStore.getUserEmailCodeFlagHeader
        },
    },
    watch: {
        getUserEmailCodeFlagHeader:{
            handler(nv,ov){
                if(nv){
                    this.siteCheckUserEmail()
                }else{
                    this.num = 0
                    this.email = ''
                    this.form.code = ''
                }
            }
        }
    },
    created() {

    },
    mounted() {
        // this.siteCheckUserEmail()
    },
    methods: {
        async siteCheckUserEmail(){
            let res = await this.API.siteCheckUserEmail({})
            console.log(res,'res');
            if(!res.success){
                this.$confirm(this.$t('verification.code.emailError'))
                .then(_ => {
                })
                .catch(_ => {});
            }else{
                this.email = res.object
            }
        },
        async siteDelSiteVerification(){
            let res = await this.API.userDelUserVerification({
            })
            this.comm.showMsg(res.success)
        },
        async send(){
            this.num = 60
            this.reduce()
            this.siteDelSiteVerification()
        },
        async siteCheckVerificationCode(){
            let res = await this.API.userCheckVerificationCode({
                code:this.form.code
            })
            if(!res.success){
                this.comm.showMsg(false,this.$t('login.js_error_code'))
            }else{
                
                this.$emit('closeAccount',true)
            }
        },
        reduce(){
            if(this.num != 0){
                this.num -= 1
                setTimeout(()=>{
                    this.reduce()
                },1000)
            }
        },
        save(formName){
            this.$refs[formName].validate((valid) => {
              if (valid) {
                this.siteCheckVerificationCode()
              } else {
                console.log('error submit!!');
                return false;
              }
            });
        },
    },
};
</script>

<style  lang="less" scoped>
.msg-text{
    text-align: center;
}
.sendCode{
    text-align: center;
}
.sendCodeInput{
    width: 70%;
}
</style>
